<script setup>
import { ref, onMounted } from 'vue'
const recommend_list = ref([
    [
        {
            "image_url": "/src/assets/file-search.png",
            "title": "文本检索",
            "recommend_text": "从文本中检索输入内容"
        },
        {
            "image_url": "/src/assets/file-search.png",
            "title": "数据读取",
            "recommend_text": "从业务数据库中检索输入内容"
        }
    ],
    [
        {
            "image_url": "/src/assets/file-search.png",
            "title": "报告生成",
            "recommend_text": "根据已有报告类型，生成新的报告"
        },
        {
            "image_url": "/src/assets/file-search.png",
            "title": "油气藏模拟",
            "recommend_text": "根据输入，完成油气藏动态预测"
        }
    ],
    [
        {
            "image_url": "/src/assets/file-search.png",
            "title": "智能分析",
            "recommend_text": "针对输入，对区块数据进行机器学习算法分析"
        },
        {
            "image_url": "/src/assets/file-search.png",
            "title": "通用问题",
            "recommend_text": "完成油气行业通用问题问答"
        }
    ]
])
</script>

<template>
    <el-card style="width: 50vw;height: 50vh;">
        <template #header>
            <div class="card-header" style="text-align: left;">
                <span>为您推荐</span>
            </div>
        </template>
        <div>
            <el-row :gutter='20' v-for="items in recommend_list">
                <el-col :span="12" v-for="item in items">
                    <el-card class="custom-card" style="max-height: 100%;">
                        <div class="card-content" style="display: flex; align-items: center;">
                            <div style='margin-right: 20px;'>
                                <el-image class="card-image" :src="item.image_url"
                                    style='width: 50px;height: 50px;'></el-image>
                            </div>
                            <div class="text-content" style='flex: 1;text-align: left;'>
                                <div class="text-line" style='font-size: 20px'>{{ item.title }}</div>
                                <div class="text-line" style='font-size: 10px'>{{ item.recommend_text }}</div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>

        </div>
    </el-card>
</template>

<style scoped lang="less">
.el-row {
    height: 80px;
    max-height: 80px;
    margin-bottom: 10px;

    .el-col {
        .el-card {
            height: 80px;
            max-height: 80px;
            box-shadow: none;
        }

        .el-card:hover {
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            transition: box-shadow 0.3s ease;
        }
    }

}
</style>
